<template>

  <div>
    <!--搜索框-->
    <div class="search-box">
      <el-form :inline="true" :model="query" class="demo-form-inline" size="small">

        <el-form-item label="标题">
          <el-input v-model="query.title" placeholder="标题"></el-input>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="query.startTime"
            type="date"
            placeholder="开始时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="query.endTime"
            type="date"
            placeholder="结束时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList()">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="reLoad">清空</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="addBanner">添加</el-button>
        </el-form-item>

      </el-form>

    </div>
    <!--数据页-->
    <div class="data-box">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >

        <el-table-column
          prop="sort"
          label="排序号"
          width="160">
        </el-table-column>


        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>

        <el-table-column
          label="轮播图"
          width="180">
          <template slot-scope="scope"><img :src="scope.row.imageUrl" alt="" class="img-box"
                                            @click="showBanner(scope.row.imageUrl)"></template>
        </el-table-column>

        <el-table-column
          prop="gmtCreate"
          label="创建时间"
          width="180">
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" size="mini" @click="showInfo(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteOne(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--分页条-->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, ->"
        :page-size="pageSize"
        :total="total"
        :current-page="pageNum"
        @current-change="getList">
      </el-pagination>
    </div>
    <!--轮播图大图-->
    <el-dialog title="轮播图" :visible.sync="dialogBanner">
      <div class="banner-box">
        <img :src="bannerUrl" class="banner-img">
      </div>
    </el-dialog>
    <!--基础信息-->
    <el-dialog title="基础信息" :visible.sync="dialogInfo">
      <el-form :model="banner">

        <el-form-item label="轮播图" :label-width="formLabelWidth">
          <div class="avatar-box">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8002/eduoss/fileoss"
              :show-file-list="false"
              :on-success="uploadSuccess">
              <img v-if="banner.imageUrl" :src="banner.imageUrl" class="banner">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

        </el-form-item>

        <el-form-item label="排序号" :label-width="formLabelWidth"
                      prop="sort"
                      :rules="[
                                  { required: true, message: '排序号不能为空'},
                                  { type: 'number', message: '排序号必须为数字值'}
                                ]"
        >
          <el-input v-model.number="banner.sort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="banner.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="链接地址" :label-width="formLabelWidth">
          <el-input v-model="banner.linkUrl" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="添加时间" :label-width="formLabelWidth">
          <el-input v-model="banner.gmtCreate" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo = false">取 消</el-button>
        <el-button type="primary" @click="updateOne">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<style>

  .banner {
    width: 90%;
  }

  .banner-box {
    display: block;
    width: 90%;
    height: 90%;
    margin: auto;
  }

  .banner-img {
    margin: auto;
    width: 100%;
    width: 100%;
  }


  .img-box {
    width: 80px;
    height: 45px;
  }

  .pagination {
    float: right;
    margin-right: 5px;
  }

  .data-box {
    margin: 0 15px 15px 15px;
    border: #f4f4f5 1px solid;
  }

  .search-box {
    border: #f4f4f5 1px solid;
    margin: 15px 15px 5px 15px;
    padding: 10px 0 0 5px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 600px;
    height: 250px;
    line-height: 250px;
    text-align: center;
    border: dashed 1px #8c939d;
    border-radius: 5px;
  }


</style>

<script>

  import banner from "@/api/cms/banner";

  export default {
    data() {
      return {

        // 分页参数
        tableData: [],
        pageSize: 6,
        pageNum: 1,
        query: {
          startTime: '',
          endTime: '',
          title: ''
        },
        total: 0,

        // 展示轮播图大图
        bannerUrl: '',
        dialogBanner: false,

        // 展示基础信息
        dialogInfo: false,
        formLabelWidth: '100px',
        banner: {}

      }
    },
    created() {
      this.getList(1);
    },
    methods: {

      // 01 分页查询
      getList(page = 1) {
        this.pageNum = page
        this.query.pageSize = this.pageSize
        this.query.pageNum = this.pageNum
        console.log(this.query)
        banner
          .page(this.query)
          .then(response => {
            this.tableData = response.data.list
            this.total = response.data.total
          })
          .catch(error => console.log(error));
      },

      // 02 清空条件查询
      reLoad() {
        this.query = {
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
        this.getList();
      },

      // 03 展示轮播图大图
      showBanner(url) {
        this.bannerUrl = url;
        this.dialogBanner = true;
      },

      // 04 通过ID 删除
      deleteOne(id) {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          banner.deleteOne(id)
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 05 上传图片成功之后
      uploadSuccess(res, file) {
        this.banner.imageUrl = res.data.url;
        // id 不为空进行更新操作
        if (this.banner.id) {
          banner.updateOne(this.banner).then(response => {
            this.$message({
              type: 'success',
              message: '图片上传成功!',
            });
            this.getList();
          })
        }
      },

      // 06 显示轮播图的基本信息
      showInfo(row) {
        this.banner = {...row};
        this.dialogInfo = true;
      },

      // 07 更新轮播图信息
      updateOne() {
        if (this.banner.id) {
          banner.updateOne(this.banner).then(response => {
            this.$message({
              type: 'success',
              message: '更新成功!',
            });
            this.dialogInfo = false;
            this.getList();
          })
        } else {
          banner.save(this.banner).then(response => {
            this.$message({
              type: 'success',
              message: '保存成功!',
            });
            this.dialogInfo = false;
            this.getList();
          })
        }
      },

      // 08 添加新的轮播图
      addBanner() {
        this.dialogInfo = true;
        this.banner = {}
      },


    },
    mounted() {
    }, watch: {}
  };
</script>
